<template>
  <div class="contentDiv flexBetween">
    <!-- 左侧组件 -->
    <div class="leftContent">
      <Draggable
        :list="tempData"
        item-key="id"
        :group="{ name: 'article', pull: 'clone' }"
        :sort="false"
        @end="end1"
        style="height: 100%"
      >
        <template #item="{ element }">
          <div class="list-item">
            {{ element.name }}
          </div>
        </template>
      </Draggable>
    </div>

    <!-- 内容区 -->

    <div class="centerContent">
      <Draggable
        :list="contentData"
        item-key="id"
        :disabled="false"
        :group="{ name: 'article', pull: '' }"
        @start="start2"
        @end="end2"
        style="height: 100%;overflow-y: auto"
      >
        <template #item="{ element,index }">
          <div style="width: 100%">
            <div style="width: 100%; overflow: hidden;overflow-y: auto">
              <component :is="element.key"></component>
              <div class="flexEnd">
                <myIcon type="deleteOutlined" @click="handleDel(index,element.id)" />
              </div>
            </div>
          </div>
        </template>
      </Draggable>
    </div>
    <!--预览发布 release-->
    <div class="preview">
      <a-button type="primary" @click="onPreview">预览</a-button>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import Draggable from "vuedraggable";
import { useRouter } from "vue-router";
const router = useRouter();
import { useDraggableStore } from "@/store/draggable.js";
const dragStore = useDraggableStore();

const tempData = reactive([
  { key: "Carousel", name: "轮播图", id: 1 },
  { key: "List", name: "列表内容", id: 2 },
  { key: "Divider", name: "分割线", id: 3 },
]);
//内容数据
const contentData = reactive([]);
//拖动方法
const end1 = (ev) => {
  // console.log("拖动结束1", ev);
  console.log(contentData);
  dragStore.setData(contentData);
};
const start2 = (event) => {
  // console.log("开始拖动", event);
};
const end2 = (ev) => {
  // console.log("拖动结束2", ev);
  console.log(contentData);
  dragStore.setData(contentData);
};
const onPreview = () => {
  router.push("/preview");
};
//删除
const handleDel = (index,id) => {
  console.log(index);
  contentData.splice(index, 1)
  // contentData = contentData.find((value, index, arr) => {
  //   if (value.id != id) {
  //     return value;
  //   }
  // });
  dragStore.setData(contentData);
};
onMounted(() => {
  dragStore.setData([]);
});
</script>

<style lang="scss" scoped>
.list-item {
  cursor: pointer;
  font-size: 14px;
  padding: 0 12px;
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #bfcbd9;
}
.leftContent {
  width: 300px;
  margin: 20px;
  border: 1px solid #666;
  height: calc(100vh - 104px);
  padding: 20px;
}
.centerContent {
  width: calc(100% - 300px);
  margin: 20px;
  overflow: hidden;
  height: calc(100vh - 104px);
  border: 1px solid #f00;
}
.preview {
  padding: 20px;
}
</style>
